<template>
  <div v-loading="loading" class="list-table noPad">
    <el-tabs v-model="activeName" :type=" types === true ? 'border-card' : ''" @tab-click="clickMenu">
      <el-tab-pane v-for="(item, key) in childMenuTabs" :key="key" :lazy="true" :label="$t(item.menuName)" :name="item.menuName">
        <component :is="menuPath" v-if="item.flag" ref="menuPath" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import dealTeamView from '@/views/deal/report/dealTeamView'
  import { childMenuList } from '@/api/system/menu'
  import { getAsyncComponent } from '@/utils'
  export default {
    components: {
      dealTeamView
    },
    props: {
      types: {
        type: Boolean,
        default: () => false
      }
    },
    data() {
      return {
        activeName: '',
        menuIdent: 'deal_report_team_list',
        // 加载
        loading: true,
        // 子页签
        childMenuTabs: [],
        // 组件地址
        menuPath: '',
        // 参数
        parameter: {},
        panelType: ''
      }
    },
    mounted() {
      this.listLoad()
    },
    methods: {
      listLoad() {
        this.loading = true
        // 菜单列表
        childMenuList(this.menuIdent).then(response => {
          this.childMenuTabs = response.rows
          if (this.childMenuTabs !== null && this.childMenuTabs !== undefined && this.childMenuTabs.length > 0) {
            this.activeName = this.childMenuTabs[0] === undefined ? '' : this.childMenuTabs[0].menuName
            this.clickMenu(response.rows[0])
          } else {
            this.$router.push({ path: '@/view/error/404' })
          }
          this.loading = false
        })
      },
      clickMenu(tab) {
        this.childMenuTabs && this.childMenuTabs.forEach(item => {
          if (item.menuName === tab.menuName || item.menuName === tab.name) {
            this.$nextTick(() => {
              this.$set(item, 'flag', true)
              this.importFormPath(item.component)
            })
          } else {
            this.$set(item, 'flag', false)
          }
        })
      },
      // 引入组件
      importFormPath(menuPath) {
        this.panelType = undefined
        if (menuPath) {
          if (menuPath.indexOf('?') === -1) { // 不含问号
            this.menuPath = getAsyncComponent('@/views/' + menuPath)
            this.parameter = {}
          } else {
            const index = menuPath.lastIndexOf('?')
            const sMenuPath = menuPath.substring(0, index)
            this.menuPath = getAsyncComponent('@/views/' + sMenuPath)

            // 增加参数
            const newKey = menuPath.split('?')[1]
            var newstr = newKey.replace(/=/g, '":"')
            const objectKey = '{"' + newstr.replace(/&/g, '","') + '"}'
            this.parameter = JSON.parse(objectKey)
            if (this.parameter !== undefined && this.parameter.contractType !== undefined) {
              this.panelType = this.parameter.contractType
            }
            console.log('查看类型: ' + this.panelType)
          }
          // 地址栏添加左侧菜单地址
          this.$nextTick(() => {
            this.$route.params.panelType = this.panelType
          })
        } else {
          const error = 'error/404'
          this.importFormPath(error)
        }
      }
    }
  }
</script>
